
import { useEffect, useRef, useState } from 'react';
import ccLog from '@/utils/ccLog';
import styles from './index.less';

const DrawChart: React.FC = () => {
  const canvasRefOne = useRef<any>(null);
  const canvasRefTWo = useRef<any>(null);

  const canvasRef = useRef(null);
  const leftDivRef = useRef(null);
  const rightDivRef = useRef(null);

  // 用于强制重新渲染
  const [, forceRender] = useState();

  // useEffect(() => {
  //   const canvasone = canvasRefOne.current;
  //   const ctx = canvasone.getContext('2d');

  //   // 设置画布大小
  //   canvasone.width = 400;
  //   canvasone.height = 200;

  //   // 设置线条样式
  //   ctx.strokeStyle = 'blue';
  //   ctx.lineWidth = 8;

  //   // 开始绘制 S 型曲线
  //   ctx.beginPath();

  //   // 移动到起点
  //   ctx.moveTo(50, 50);

  //   // 绘制第一段贝塞尔曲线（上半部分）
  //   ctx.bezierCurveTo(100, 0, 150, 0, 200, 50);

  //   // 绘制第二段贝塞尔曲线（下半部分）
  //   ctx.bezierCurveTo(250, 100, 300, 100, 350, 50);

  //   // 描边
  //   ctx.stroke();


  //   const canvasTwo = canvasRefTWo.current;
  //   const ctxT = canvasTwo.getContext('2d');

  //   // 设置画布大小
  //   canvasTwo.width = 800;
  //   canvasTwo.height = 600;

  //   // 定义起始点和结束点
  //   const startX = 100;
  //   const startY = 100;
  //   const endX = 700;
  //   const endY = 500;

  //   // 计算控制点
  //   const controlX1 = startX + (endX - startX) * 0.5;
  //   const controlY1 = startY;
  //   const controlX2 = endX - (endX - startX) * 0.5;
  //   const controlY2 = endY;

  //   ccLog({ startX, startY }, { label: 'chaoyue-起始点', type: 'info' });
  //   ccLog({ endX, endY }, { label: 'chaoyue-终止点', type: 'info' });

  //   ccLog({ controlX1, controlY1 }, { label: 'chaoyue-控制1', type: 'success' });
  //   ccLog({ controlX2, controlY2 }, { label: 'chaoyue-控制2', type: 'success' });

  //   // 开始绘制路径
  //   ctxT.beginPath();
  //   ctxT.moveTo(0, startY);
  //   // ctxT.moveTo(startX, startY);
  //   ctxT.lineTo(startX, startY);
  //   // ctxT.closePath();
  //   // 使用 bezierCurveTo 方法绘制三阶贝塞尔曲线
  //   ctxT.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
  //   ctxT.lineTo(800, endY);
  //   ctxT.strokeStyle = 'blue';
  //   ctxT.lineWidth = 20;
  //   ctxT.stroke();
  // }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 获取左右两个 div 的引用
    const leftDiv = leftDivRef.current;
    const rightDiv = rightDivRef.current;

    // 绘制曲线的函数
    const drawCurve = () => {
      // 获取两个 div 的位置信息
      const leftRect = leftDiv.getBoundingClientRect();
      const rightRect = rightDiv.getBoundingClientRect();

      // 计算起点和终点
      const startX = leftRect.right; // 左边 div 的右侧
      const startY = leftRect.top + leftRect.height / 2; // 左边 div 的垂直中心
      const endX = rightRect.left; // 右边 div 的左侧
      const endY = rightRect.top + rightRect.height / 2; // 右边 div 的垂直中心

      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制 S 型曲线
      ctx.beginPath();
      ctx.moveTo(startX, startY);

      // 第一段贝塞尔曲线（上半部分）
      ctx.bezierCurveTo(
        startX + 100, startY, // 控制点1
        endX - 100, startY - 100, // 控制点2
        endX, endY // 终点
      );

      // 第二段贝塞尔曲线（下半部分）
      ctx.bezierCurveTo(
        endX - 100, endY + 100, // 控制点1
        startX + 100, endY, // 控制点2
        startX, startY // 回到起点
      );

      // 设置线条样式
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 2;
      ctx.stroke();
    };

    // 初始化绘制
    drawCurve();

    // 创建 ResizeObserver 监听 div 的变化
    const resizeObserver = new ResizeObserver(() => {
      // 强制重新渲染以更新曲线
      forceRender({});
      drawCurve();
    });

    // 监听左右两个 div
    resizeObserver.observe(leftDiv);
    resizeObserver.observe(rightDiv);

    // 清理函数
    return () => {
      resizeObserver.disconnect();
    };
  }, []);

  return (
    // <div className={styles['container']}>
    //   <canvas ref={canvasRefOne} className={styles['one']} width={400} height={200}></canvas>
    //   <canvas ref={canvasRefTWo} className={styles['two']} width={800} height={600}></canvas>
    // </div>
    <div
      style={{
        position: 'relative',
        width: '800px',
        height: '600px',
        border: '1px solid black',
      }}
    >
      {/* 左边的 div */}
      <div
        ref={leftDivRef}
        style={{
          position: 'absolute',
          left: '50px',
          top: '250px',
          width: '100px',
          height: '100px',
          backgroundColor: 'lightblue',
          border: '1px solid black',
          resize: 'both', // 允许调整大小
          overflow: 'auto', // 允许调整大小
        }}
      >
        Left Div
      </div>

      {/* 右边的 div */}
      <div
        ref={rightDivRef}
        style={{
          position: 'absolute',
          right: '50px',
          top: '250px',
          width: '100px',
          height: '100px',
          backgroundColor: 'lightgreen',
          border: '1px solid black',
          resize: 'both', // 允许调整大小
          overflow: 'auto', // 允许调整大小
        }}
      >
        Right Div
      </div>

      {/* Canvas 用于绘制曲线 */}
      <canvas
        ref={canvasRef}
        width={800}
        height={600}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          pointerEvents: 'none', // 防止 canvas 拦截点击事件
        }}
      ></canvas>
    </div>
  );
};

export default DrawChart;
